<template>
  <div class="home-container">
    <el-header class="header">
      <div class="header-left">
        <span class="system-name">宠物领养系统</span>
      </div>  
    </el-header> 
<PetList></PetList>
  </div>
</template>
<script>
import  PetList from  "../components/PetList.vue"
export default {
  name: 'HomePage',
  components:{
    PetList,
  },
  computed: {
    user() {
      return this.$store.state.user
    },
    loginTime() {
      return new Date().toLocaleString()
    }
  },
  methods: {
    handleCommand(command) {
      if (command === 'logout') {
        this.$store.commit('CLEAR_USER')
        this.$router.push('/login')
      }
    }
  }
}
</script>

<style scoped lang="scss">
.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #409EFF;
  color: #fff;

  .system-name {
    font-size: 20px;
    font-weight: bold;
  }

  .user-info {
    cursor: pointer;
    padding: 0 15px;
  }
}


</style>